import React from 'react';
import PropTypes from 'prop-types';
import './icons.scss';

const Icon = ({ name }) => {
  switch (name.toLowerCase()) {
    case 'buyer':
      return <Buyer />;
    case 'supplier':
      return <Supplier />;
    case 'transporter':
      return <Transporter />;
    case 'ggcb':
    case 'uscts':
      return <Auditor />;
    case 'factor 1':
    case 'factor 2':
      return <Factor />;
    case 'complete':
      return <Complete />;
    case 'cloud':
      return <Cloud />;
    case 'document':
      return <Document />;
    case 'proof-document':
      return <ProofDocument />;
    case 'transport':
      return <Transport />;
    case 'tick':
      return <Tick />;
    case 'left-arrow':
      return <LeftArrow />;
    default:
      return <Buyer />;
  }
};

const LeftArrow = () => (
  <svg width="9" height="10" viewBox="0 0 9 10" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path
      d="M8 1L1 5L8 9"
      stroke="#3FBEA5"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
);

const Tick = () => (
  <svg
    width="18"
    height="15"
    viewBox="0 0 18 15"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    style={{ flex: '0 0 18px' }}
  >
    <path
      d="M2 8.44828L6.42105 13L16 2"
      stroke="#69D7BC"
      strokeWidth="4"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
);

const ProofDocument = () => (
  <svg
    width="15"
    height="18"
    viewBox="0 0 15 18"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    xmlnsXlink="http://www.w3.org/1999/xlink"
  >
    <rect width="15" height="18" fill="url(#pattern0)" />
    <defs>
      <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
        <use xlinkHref="#image0" transform="matrix(.00207 0 0 .00173 0 -.013)" />
      </pattern>
      <image
        id="image0"
        width="482"
        height="594"
        xlinkHref=""
      />
    </defs>
  </svg>
);
const Transport = () => (
  <svg
    style={{ margin: '-2px 0 -5px 7px' }}
    width="31"
    height="23"
    viewBox="0 0 31 23"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M7.6642 14.9856C7.11192 14.9856 6.6642 14.5379 6.6642 13.9856V8.6642H1.34277C0.790489 8.6642 0.342773 8.21649 0.342773 7.6642C0.342773 7.11192 0.790489 6.6642 1.34277 6.6642H6.6642V1.34277C6.6642 0.790488 7.11192 0.342773 7.6642 0.342773C8.21649 0.342773 8.6642 0.790488 8.6642 1.34277V6.6642H13.9856C14.5379 6.6642 14.9856 7.11192 14.9856 7.6642C14.9856 8.21649 14.5379 8.6642 13.9856 8.6642H8.6642V13.9856C8.6642 14.5379 8.21649 14.9856 7.6642 14.9856ZM12.6428 3.02849C12.6428 2.75235 12.8666 2.52849 13.1428 2.52849H19.0428C19.3189 2.52849 19.5428 2.75235 19.5428 3.02849V8.84992H26.6285C26.8124 8.84992 26.9815 8.95091 27.0687 9.11287L30.0187 14.5914C30.058 14.6643 30.0785 14.7457 30.0785 14.8285V19.8856C30.0785 20.1618 29.8546 20.3856 29.5785 20.3856H26.2071L26.2059 20.3856C26.1643 21.7458 25.0487 22.8356 23.6785 22.8356C22.3083 22.8356 21.1926 21.7458 21.1511 20.3856L21.1499 20.3856H19.0428H12.2999C12.1195 20.3856 11.9614 20.2901 11.8735 20.1468C11.8768 20.1998 11.8785 20.2532 11.8785 20.3071C11.8785 21.7036 10.7464 22.8356 9.34992 22.8356C7.97971 22.8356 6.86406 21.7458 6.82255 20.3856L6.82134 20.3856H2.18563C1.90949 20.3856 1.68563 20.1618 1.68563 19.8856V12.2999C1.68563 12.0238 1.90949 11.7999 2.18563 11.7999C2.46177 11.7999 2.68563 12.0238 2.68563 12.2999V19.3856H6.82134C6.87831 19.3856 6.93305 19.3952 6.98407 19.4127C7.3453 18.4576 8.2683 17.7785 9.34992 17.7785C10.5562 17.7785 11.5651 18.6231 11.8176 19.7532C11.8757 19.5413 12.0696 19.3856 12.2999 19.3856H18.5428V9.34992V3.52849H13.1428C12.8666 3.52849 12.6428 3.30463 12.6428 3.02849ZM26.2071 19.3856C26.1501 19.3856 26.0954 19.3952 26.0443 19.4127C25.6831 18.4576 24.7601 17.7785 23.6785 17.7785C22.5969 17.7785 21.6739 18.4576 21.3126 19.4127C21.2616 19.3952 21.2069 19.3856 21.1499 19.3856H19.5428V9.84992H26.3298L29.0785 14.9545V19.3856H26.2071ZM10.8785 20.3071C10.8785 21.1513 10.1941 21.8356 9.34992 21.8356C8.50571 21.8356 7.82135 21.1513 7.82135 20.3071C7.82135 19.4629 8.50571 18.7785 9.34992 18.7785C10.1941 18.7785 10.8785 19.4629 10.8785 20.3071ZM23.6785 21.8356C24.5227 21.8356 25.2071 21.1513 25.2071 20.3071C25.2071 19.4629 24.5227 18.7785 23.6785 18.7785C22.8343 18.7785 22.1499 19.4629 22.1499 20.3071C22.1499 21.1513 22.8343 21.8356 23.6785 21.8356ZM21.1499 11.3785C20.8738 11.3785 20.6499 11.6023 20.6499 11.8785V14.4071C20.6499 14.6832 20.8738 14.9071 21.1499 14.9071H26.6285C26.8018 14.9071 26.9627 14.8173 27.0538 14.6699C27.1449 14.5225 27.1532 14.3384 27.0757 14.1835L25.8114 11.6549C25.7267 11.4855 25.5536 11.3785 25.3642 11.3785H21.1499ZM21.6499 13.9071V12.3785H25.0552L25.8195 13.9071H21.6499Z"
      fill="#fff"
    />
  </svg>
);

const Document = () => (
  <svg
    style={{ display: 'block' }}
    width="14"
    height="17"
    viewBox="0 0 14 17"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M1.96295 1.96289V15.037H12.0741V5.94035H9.06638C8.67859 5.94035 8.37036 5.62469 8.37036 5.2429V1.96289H1.96295ZM9.37036 2.73355L11.4253 4.94035H9.37036V2.73355ZM0.962952 1.66033C0.962952 1.27854 1.27119 0.962891 1.65898 0.962891H8.87036C9.00915 0.962891 9.1417 1.02058 9.23628 1.12215L12.94 5.09961C13.0262 5.19215 13.0741 5.3139 13.0741 5.44035V15.3395C13.0741 15.7213 12.7658 16.037 12.378 16.037H1.65898C1.27118 16.037 0.962952 15.7213 0.962952 15.3395V1.66033ZM10.4051 7.72524C10.5988 7.92203 10.5964 8.2386 10.3996 8.43232L6.26565 12.5019C6.16186 12.6041 6.01868 12.656 5.87354 12.6439C5.72839 12.6319 5.59572 12.5571 5.51018 12.4393L3.92021 10.2479C3.75804 10.0244 3.80776 9.71177 4.03127 9.5496C4.25477 9.38743 4.56743 9.43715 4.7296 9.66066L5.97827 11.3816L9.69804 7.71969C9.89483 7.52597 10.2114 7.52845 10.4051 7.72524Z"
      fill="#69D7BC"
    />
  </svg>
);

const Cloud = () => (
  <svg width="40" height="29" viewBox="0 0 40 29" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path
      d="M8.5 10.4999C10 -1.00006 31.5 -5.00012 31.5 12.9999C39.5 12.9999 42.5 25.5 33 27.9999H8.5L3.5 25.5L1 18.9999L3.5 12.9999L8.5 10.4999Z"
      fill="#fff"
    />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M31.6462 27.4666H31.6449H11.0918V27.4544L10.0802 27.4661C10.0481 27.4665 10.016 27.4666 9.98374 27.4666C5.47412 27.4666 1.81836 23.8109 1.81836 19.3013C1.81836 15.3157 4.67482 11.9952 8.45253 11.279L9.15732 11.1454L9.25665 10.435C10.002 5.10354 14.5823 1 20.1193 1C26.1772 1 31.0882 5.91095 31.0882 11.9689C31.0882 12.1382 31.0844 12.3064 31.0768 12.4737L31.0319 13.4663L32.0242 13.5175C35.7078 13.7078 38.6366 16.7559 38.6366 20.4873C38.6366 24.215 35.7138 27.2606 32.0355 27.4566L31.8471 27.4666H31.6698H31.6684L31.6573 27.4666L31.6462 27.4666ZM9.95571 28.4666C9.92901 28.4665 9.90234 28.4663 9.8757 28.466C4.86358 28.4081 0.818359 24.3271 0.818359 19.3013C0.818359 14.8264 4.02529 11.1005 8.26628 10.2965C9.07978 4.47798 14.0766 0 20.1193 0C26.7295 0 32.0882 5.35866 32.0882 11.9689C32.0882 12.1532 32.084 12.3366 32.0758 12.5189C36.2881 12.7365 39.6366 16.2209 39.6366 20.4873C39.6366 24.7494 36.295 28.2311 32.0887 28.4551V28.4666H31.6698L31.6573 28.4666L31.6449 28.4666H31.0887H11.0918H10.0918V28.466C10.0652 28.4663 10.0385 28.4665 10.0118 28.4666L9.98374 28.4666L9.95571 28.4666ZM20.217 9.76481C20.0285 9.59519 19.7429 9.59356 19.5524 9.76102L14.4259 14.2688C14.2185 14.4512 14.1982 14.7671 14.3806 14.9745C14.5629 15.1819 14.8789 15.2022 15.0862 15.0198L19.3826 11.242V22.8071C19.3826 23.0833 19.6064 23.3071 19.8826 23.3071C20.1587 23.3071 20.3826 23.0833 20.3826 22.8071V11.259L24.5581 15.016C24.7634 15.2007 25.0796 15.184 25.2643 14.9788C25.449 14.7735 25.4323 14.4573 25.227 14.2726L20.217 9.76481Z"
      fill="#1B263C"
    />
  </svg>
);

const Complete = () => (
  <svg width="42" height="42" viewBox="0 0 42 42" fill="none" className="action-completed-icon">
    <circle cx="21" cy="21" r="20" stroke="#69D7BC" strokeWidth="2" />
    <path
      d="M14 22.4483L18.4211 27L28 16"
      stroke="#69D7BC"
      strokeWidth="4"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
);
const Auditor = () => (
  <svg width="59" height="60" viewBox="0 0 59 60" fill="none" xmlns="http://www.w3.org/2000/svg">
    <circle cx="29.491" cy="29.794" r="28.491" stroke="#69D7BC" strokeWidth="2" />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M29.3057 57.1646C44.5245 57.1646 56.8618 44.8273 56.8618 29.6085C56.8618 14.3896 44.5245 2.05233 29.3057 2.05233C14.0869 2.05233 1.7496 14.3896 1.7496 29.6085C1.7496 44.8273 14.0869 57.1646 29.3057 57.1646ZM29.3057 58.9142C45.4908 58.9142 58.6114 45.7936 58.6114 29.6085C58.6114 13.4234 45.4908 0.302734 29.3057 0.302734C13.1206 0.302734 0 13.4234 0 29.6085C0 45.7936 13.1206 58.9142 29.3057 58.9142Z"
      fill="#69D7BC"
    />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M29.3057 43.1678C36.3385 43.1678 41.9903 37.6578 41.9903 30.9207C41.9903 24.1835 36.3385 18.6735 29.3057 18.6735C22.273 18.6735 16.6212 24.1835 16.6212 30.9207C16.6212 37.6578 22.273 43.1678 29.3057 43.1678ZM29.3057 44.0426C36.7943 44.0426 42.8651 38.1677 42.8651 30.9207C42.8651 23.6736 36.7943 17.7987 29.3057 17.7987C21.8171 17.7987 15.7464 23.6736 15.7464 30.9207C15.7464 38.1677 21.8171 44.0426 29.3057 44.0426Z"
      fill="#69D7BC"
    />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M29.3057 39.6686C34.4157 39.6686 38.4911 35.7158 38.4911 30.9207C38.4911 26.1255 34.4157 22.1727 29.3057 22.1727C24.1957 22.1727 20.1203 26.1255 20.1203 30.9207C20.1203 35.7158 24.1957 39.6686 29.3057 39.6686ZM29.3057 40.5434C34.8618 40.5434 39.3659 36.2352 39.3659 30.9207C39.3659 25.6061 34.8618 21.2979 29.3057 21.2979C23.7496 21.2979 19.2455 25.6061 19.2455 30.9207C19.2455 36.2352 23.7496 40.5434 29.3057 40.5434Z"
      fill="#69D7BC"
    />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M8.31058 15.1743C8.31058 13.4833 9.68139 12.1125 11.3724 12.1125H27.1187C27.3603 12.1125 27.5561 12.3083 27.5561 12.5499C27.5561 12.7915 27.3603 12.9873 27.1187 12.9873H11.3724C10.1645 12.9873 9.18538 13.9664 9.18538 15.1743V45.7922C9.18538 46.0338 8.98954 46.2296 8.74798 46.2296C8.50641 46.2296 8.31058 46.0338 8.31058 45.7922V15.1743Z"
      fill="#69D7BC"
    />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M37.1789 18.6735C37.1789 18.4319 37.3747 18.2361 37.6163 18.2361H48.1139C48.3554 18.2361 48.5513 18.4319 48.5513 18.6735C48.5513 18.9151 48.3554 19.1109 48.1139 19.1109H37.6163C37.3747 19.1109 37.1789 18.9151 37.1789 18.6735Z"
      fill="#69D7BC"
    />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M34.5545 44.9174C34.5545 44.6758 34.7503 44.48 34.9919 44.48H48.1139C48.3554 44.48 48.5513 44.6758 48.5513 44.9174C48.5513 45.159 48.3554 45.3548 48.1139 45.3548H34.9919C34.7503 45.3548 34.5545 45.159 34.5545 44.9174Z"
      fill="#69D7BC"
    />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M41.5529 23.0475C41.5529 22.8059 41.7487 22.6101 41.9903 22.6101H48.1139C48.3554 22.6101 48.5513 22.8059 48.5513 23.0475C48.5513 23.289 48.3554 23.4849 48.1139 23.4849H41.9903C41.7487 23.4849 41.5529 23.289 41.5529 23.0475Z"
      fill="#69D7BC"
    />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M39.8033 40.5434C39.8033 40.3019 39.9991 40.106 40.2407 40.106H48.1139C48.3554 40.106 48.5513 40.3019 48.5513 40.5434C48.5513 40.785 48.3554 40.9808 48.1139 40.9808H40.2407C39.9991 40.9808 39.8033 40.785 39.8033 40.5434Z"
      fill="#69D7BC"
    />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M43.3025 27.4215C43.3025 27.1799 43.4983 26.9841 43.7399 26.9841H48.1139C48.3554 26.9841 48.5513 27.1799 48.5513 27.4215C48.5513 27.663 48.3554 27.8589 48.1139 27.8589H43.7399C43.4983 27.8589 43.3025 27.663 43.3025 27.4215Z"
      fill="#69D7BC"
    />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M43.3025 31.7955C43.3025 31.5539 43.4983 31.3581 43.7399 31.3581H48.1139C48.3554 31.3581 48.5513 31.5539 48.5513 31.7955C48.5513 32.037 48.3554 32.2328 48.1139 32.2328H43.7399C43.4983 32.2328 43.3025 32.037 43.3025 31.7955Z"
      fill="#69D7BC"
    />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M42.4277 36.1694C42.4277 35.9279 42.6235 35.732 42.8651 35.732H48.1139C48.3554 35.732 48.5513 35.9279 48.5513 36.1694C48.5513 36.411 48.3554 36.6068 48.1139 36.6068H42.8651C42.6235 36.6068 42.4277 36.411 42.4277 36.1694Z"
      fill="#69D7BC"
    />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M32.3675 46.667H26.2439V57.1646H32.3675V46.667ZM26.2439 45.7922C25.7608 45.7922 25.3691 46.1839 25.3691 46.667V57.1646C25.3691 57.6477 25.7608 58.0394 26.2439 58.0394H32.3675C32.8507 58.0394 33.2423 57.6477 33.2423 57.1646V46.667C33.2423 46.1839 32.8507 45.7922 32.3675 45.7922H26.2439Z"
      fill="#69D7BC"
    />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M28.8683 45.7922V43.6052H29.7431V45.7922H28.8683Z"
      fill="#69D7BC"
    />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M31.0553 12.9873C30.3306 12.9873 29.7431 13.5748 29.7431 14.2995V17.2221C29.7431 17.4637 29.5473 17.6595 29.3057 17.6595C29.0642 17.6595 28.8683 17.4637 28.8683 17.2221V14.2995C28.8683 13.0917 29.8475 12.1125 31.0553 12.1125H48.1139C49.3217 12.1125 50.3009 13.0917 50.3009 14.2995V48.0537L49.4261 48.9545V14.2995C49.4261 13.5748 48.8386 12.9873 48.1139 12.9873H31.0553ZM32.3675 53.228H45.2287L44.6147 53.6695L44.9262 54.1028H32.3675V53.228ZM13.122 53.228H26.2439V54.1028H13.122V53.228Z"
      fill="#69D7BC"
    />
  </svg>
);

const Buyer = () => (
  <svg
    className="role-icon"
    width="59"
    height="59"
    viewBox="0 0 59 59"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <circle
      cx="29.491"
      cy="29.491"
      r="28.491"
      className="role-icon__circle"
      stroke="#3FBEA5"
      strokeWidth="2"
    />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M35.6914 17.6914C35.6914 23.0865 31.3788 27.46 26.059 27.46C20.7392 27.46 16.4267 23.0865 16.4267 17.6914C16.4267 12.2964 20.7392 7.92285 26.059 7.92285C31.3788 7.92285 35.6914 12.2964 35.6914 17.6914ZM34.8538 17.6914C34.8538 22.6173 30.9162 26.6106 26.059 26.6106C21.2018 26.6106 17.2643 22.6173 17.2643 17.6914C17.2643 12.7655 21.2018 8.77229 26.059 8.77229C30.9162 8.77229 34.8538 12.7655 34.8538 17.6914ZM25.8496 24.487C23.862 24.487 22.2899 22.9444 22.2899 21.0892C22.2899 20.8546 22.1023 20.6645 21.8711 20.6645C21.6398 20.6645 21.4523 20.8546 21.4523 21.0892C21.4523 23.4562 23.4427 25.3364 25.8496 25.3364C28.2566 25.3364 30.247 23.4562 30.247 21.0892C30.247 20.8546 30.0595 20.6645 29.8282 20.6645C29.5969 20.6645 29.4094 20.8546 29.4094 21.0892C29.4094 22.9444 27.8373 24.487 25.8496 24.487ZM40.3417 50.1944V52.0089H41.2664V50.1944C42.7272 50.0993 43.7926 49.678 44.4627 48.9305C45.1462 48.183 45.4879 47.3267 45.4879 46.3618C45.4879 45.7366 45.374 45.1997 45.1462 44.7512C44.9183 44.2891 44.5766 43.9086 44.1209 43.6096C43.6653 43.3106 43.2297 43.0795 42.8143 42.9164C42.4122 42.7397 41.8963 42.5631 41.2664 42.3864V37.249C42.5798 37.3985 43.6318 37.9557 44.4225 38.9207L45.1864 38.0644C44.1813 36.9364 42.8746 36.3044 41.2664 36.1685V34.3133H40.3417V36.1685C39.1624 36.2228 38.1841 36.583 37.4068 37.249C36.6295 37.9013 36.2408 38.744 36.2408 39.7769C36.2408 40.3477 36.3481 40.8438 36.5625 41.2651C36.7769 41.6729 37.1119 42.0194 37.5676 42.3048C38.0232 42.5767 38.432 42.7873 38.7938 42.9368C39.1691 43.0727 39.685 43.2358 40.3417 43.4261V49.1343C38.8273 49.0256 37.5676 48.3732 36.5625 47.1772L35.8187 48.0538C36.8908 49.3858 38.3985 50.0993 40.3417 50.1944ZM43.4978 44.7308C44.0204 45.125 44.2818 45.6958 44.2818 46.4433C44.2818 47.0957 44.0405 47.6869 43.5581 48.2169C43.089 48.747 42.3251 49.0528 41.2664 49.1343V43.6911C42.2447 43.9901 42.9885 44.3367 43.4978 44.7308ZM38.1908 41.204C37.6949 40.8642 37.447 40.3681 37.447 39.7157C37.447 39.0226 37.715 38.445 38.2511 37.9829C38.8005 37.5208 39.4974 37.2693 40.3417 37.2286V42.1214C39.4036 41.8495 38.6866 41.5437 38.1908 41.204ZM52.0245 43.387C52.0245 45.1529 51.6235 46.8238 50.9088 48.3112L50.0497 49.0195C51.0369 47.3784 51.6057 45.4501 51.6057 43.387C51.6057 37.4056 46.8244 32.5566 40.9263 32.5566C35.0283 32.5566 30.247 37.4056 30.247 43.387C30.247 49.3685 35.0283 54.2174 40.9263 54.2174C42.1789 54.2174 43.3812 53.9987 44.4979 53.5969L43.6418 54.3028C42.7728 54.5244 41.8631 54.6421 40.9263 54.6421C34.797 54.6421 29.8282 49.603 29.8282 43.387C29.8282 37.171 34.797 32.1319 40.9263 32.1319C47.0557 32.1319 52.0245 37.171 52.0245 43.387ZM52.8621 43.387C52.8621 44.7187 52.6501 46.0001 52.2584 47.1985L53.3817 46.2723C53.5898 45.3445 53.6997 44.3787 53.6997 43.387C53.6997 36.2327 47.9809 30.433 40.9263 30.433C40.5105 30.433 40.0992 30.4532 39.6935 30.4926C38.3033 28.4002 36.354 26.7215 34.0629 25.6765C33.9479 25.8503 33.8275 26.0202 33.702 26.1858H33.6918C31.8341 27.998 29.1306 29.1589 26.059 29.1589C22.9875 29.1589 20.2839 27.998 18.4262 26.1858H18.4161C18.3269 26.0681 18.2403 25.9483 18.1564 25.8265C17.9245 25.9398 17.6963 26.0596 17.472 26.1858H17.2643C17.2873 26.2122 17.3105 26.2385 17.3338 26.2647C13.2897 28.6045 10.5635 33.0184 10.5635 38.078V42.2561H10.5635V50.179H11.4438V44.0241H11.4444V43.1747H11.4438V42.2561H11.4011V38.078C11.4011 33.2538 14.0447 29.0558 17.943 26.8927C19.9667 28.8094 22.854 30.0083 26.059 30.0083C29.3441 30.0083 32.2954 28.7488 34.3251 26.7478C36.0865 27.6696 37.6054 29.0014 38.7589 30.6188C32.9534 31.6251 28.4847 36.6048 28.1707 42.7001V44.074C28.5228 50.9089 34.0991 56.341 40.9263 56.341C41.0086 56.341 41.0907 56.3402 41.1726 56.3386L42.2955 55.4128C41.8462 55.4648 41.3894 55.4916 40.9263 55.4916C34.3344 55.4916 28.9906 50.0722 28.9906 43.387C28.9906 36.7019 34.3344 31.2825 40.9263 31.2825C47.5183 31.2825 52.8621 36.7019 52.8621 43.387Z"
      fill="#3FBEA5"
    />
  </svg>
);

const Supplier = () => (
  <svg
    className="role-icon"
    width="59"
    height="59"
    viewBox="0 0 59 59"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <circle
      cx="29.491"
      cy="29.491"
      r="28.491"
      className="role-icon__circle"
      stroke="#69D7BC"
      strokeWidth="2"
    />
    <path d="M31.6919 34.333V57.6618" stroke="#69D7BC" />
    <path d="M25.3091 38.0747H48.6378" stroke="#69D7BC" />
    <path d="M33.4521 26.4102C33.4521 26.4102 37.8538 28.1708 40.4948 33.893" stroke="#69D7BC" />
    <rect x="9.684" y="42.256" width="0.88" height="7.923" fill="#69D7BC" />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M25.1791 27.46C30.4989 27.46 34.8115 23.0865 34.8115 17.6914C34.8115 12.2964 30.4989 7.92285 25.1791 7.92285C19.8593 7.92285 15.5468 12.2964 15.5468 17.6914C15.5468 23.0865 19.8593 27.46 25.1791 27.46ZM25.1791 26.6106C30.0363 26.6106 33.9739 22.6173 33.9739 17.6914C33.9739 12.7655 30.0363 8.77229 25.1791 8.77229C20.3219 8.77229 16.3844 12.7655 16.3844 17.6914C16.3844 22.6173 20.3219 26.6106 25.1791 26.6106ZM21.4099 21.0892C21.4099 22.9444 22.9821 24.487 24.9697 24.487C26.9573 24.487 28.5295 22.9444 28.5295 21.0892C28.5295 20.8546 28.717 20.6645 28.9483 20.6645C29.1796 20.6645 29.3671 20.8546 29.3671 21.0892C29.3671 23.4562 27.3767 25.3364 24.9697 25.3364C22.5627 25.3364 20.5723 23.4562 20.5723 21.0892C20.5723 20.8546 20.7598 20.6645 20.9911 20.6645C21.2224 20.6645 21.4099 20.8546 21.4099 21.0892ZM33.183 25.6765C35.2655 26.6263 37.0655 28.0998 38.4201 29.9315H37.3528C36.2785 28.6226 34.9504 27.5355 33.4451 26.7478C31.4155 28.7488 28.4642 30.0083 25.1791 30.0083C21.9741 30.0083 19.0867 28.8094 17.063 26.8927C13.1648 29.0558 10.5212 33.2538 10.5212 38.078V43.1747H10.5646V44.0241H9.68359V38.078C9.68359 33.0184 12.4098 28.6045 16.4538 26.2647C16.4305 26.2385 16.4074 26.2122 16.3844 26.1858H16.5921C16.8163 26.0596 17.0446 25.9398 17.2765 25.8265C17.3604 25.9483 17.447 26.0681 17.5362 26.1858H17.5463C19.404 27.998 22.1076 29.1589 25.1791 29.1589C28.2507 29.1589 30.9542 27.998 32.8119 26.1858H32.8221C32.9476 26.0202 33.0679 25.8503 33.183 25.6765Z"
      fill="#69D7BC"
    />
    <path
      d="M25.1489 33.9521H48.7982V50.8125C48.7748 50.8303 48.7493 50.8496 48.7218 50.8703C48.5458 51.0032 48.2876 51.1951 47.961 51.4299C47.3074 51.8997 46.3811 52.5399 45.2918 53.2207C43.1028 54.5888 40.2956 56.0953 37.7326 56.736C35.1372 57.3849 31.8728 57.7129 29.2395 57.8775C27.9265 57.9595 26.7775 58.0006 25.9569 58.0211C25.6328 58.0292 25.3601 58.0341 25.1489 58.037V33.9521Z"
      stroke="#69D7BC"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M35.9648 17.6063C35.9706 17.4603 35.9735 17.3136 35.9735 17.1662C35.9735 11.1549 31.1004 6.28174 25.089 6.28174C19.0777 6.28174 14.2046 11.1549 14.2046 17.1662C14.2046 17.3136 14.2075 17.4603 14.2133 17.6063H13.2126C13.2073 17.4603 13.2046 17.3135 13.2046 17.1662C13.2046 10.6026 18.5254 5.28174 25.089 5.28174C31.6526 5.28174 36.9735 10.6026 36.9735 17.1662C36.9735 17.3135 36.9708 17.4603 36.9655 17.6063H35.9648Z"
      fill="#69D7BC"
    />
    <circle cx="13.645" cy="17.167" r="1.321" fill="#69D7BC" />
    <circle cx="36.534" cy="17.167" r="1.321" fill="#69D7BC" />
  </svg>
);
const Transporter = () => (
  <svg
    className="role-icon"
    width="59"
    height="59"
    viewBox="0 0 59 59"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <circle
      cx="29.491"
      cy="29.491"
      r="28.491"
      className="role-icon__circle"
      stroke="#69D7BC"
      strokeWidth="2"
    />
    <rect x="9.684" y="42.256" width="0.88" height="7.923" fill="#69D7BC" />
    <path d="M28.6113 38.2944C33.4531 43.5764 28.6113 53.26 22.0088 53.26" stroke="#69D7BC" />
    <path d="M48.0109 47.7877C41.3849 50.5148 33.9603 42.635 36.2336 36.4362" stroke="#69D7BC" />
    <path
      d="M28.0606 58.5547C28.4451 55.2557 31.0763 52.9351 34.2128 52.0394C37.3572 51.1415 40.8325 51.7263 42.8252 54.0314L43.5818 53.3774C41.2566 50.6877 37.3269 50.1102 33.9382 51.0778C30.5418 52.0478 27.5123 54.6208 27.0673 58.439L28.0606 58.5547Z"
      fill="#69D7BC"
    />
    <path d="M33.4531 26.4102C33.4531 26.4102 37.8548 28.1708 40.4958 33.893" stroke="#69D7BC" />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M25.1796 27.46C30.4994 27.46 34.8119 23.0865 34.8119 17.6914C34.8119 12.2964 30.4994 7.92285 25.1796 7.92285C19.8598 7.92285 15.5473 12.2964 15.5473 17.6914C15.5473 23.0865 19.8598 27.46 25.1796 27.46ZM25.1796 26.6106C30.0368 26.6106 33.9744 22.6173 33.9744 17.6914C33.9744 12.7655 30.0368 8.77229 25.1796 8.77229C20.3224 8.77229 16.3848 12.7655 16.3848 17.6914C16.3848 22.6173 20.3224 26.6106 25.1796 26.6106ZM21.4104 21.0892C21.4104 22.9444 22.9826 24.487 24.9702 24.487C26.9578 24.487 28.53 22.9444 28.53 21.0892C28.53 20.8546 28.7175 20.6645 28.9488 20.6645C29.1801 20.6645 29.3676 20.8546 29.3676 21.0892C29.3676 23.4562 27.3772 25.3364 24.9702 25.3364C22.5632 25.3364 20.5728 23.4562 20.5728 21.0892C20.5728 20.8546 20.7603 20.6645 20.9916 20.6645C21.2229 20.6645 21.4104 20.8546 21.4104 21.0892ZM33.1835 25.6765C35.266 26.6263 37.066 28.0998 38.4206 29.9315H37.3533C36.279 28.6226 34.9509 27.5355 33.4456 26.7478C31.416 28.7488 28.4647 30.0083 25.1796 30.0083C21.9746 30.0083 19.0872 28.8094 17.0635 26.8927C13.1653 29.0558 10.5217 33.2538 10.5217 38.078V43.1747H10.5643V44.0241H9.68408V38.078C9.68408 33.0184 12.4103 28.6045 16.4543 26.2647C16.431 26.2385 16.4079 26.2122 16.3848 26.1858H16.5926C16.8168 26.0596 17.045 25.9398 17.277 25.8265C17.3609 25.9483 17.4475 26.0681 17.5366 26.1858H17.5468C19.4045 27.998 22.1081 29.1589 25.1796 29.1589C28.2511 29.1589 30.9547 27.998 32.8124 26.1858H32.8226C32.9481 26.0202 33.0684 25.8503 33.1835 25.6765Z"
      fill="#69D7BC"
    />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M50.915 48.8348C50.4461 40.3268 43.3985 33.5723 34.7734 33.5723C25.8449 33.5723 18.6069 40.8102 18.6069 49.7387C18.6069 52.3104 19.2074 54.7418 20.2758 56.9004L19.1212 56.7986C18.1484 54.6452 17.6069 52.2552 17.6069 49.7387C17.6069 40.2579 25.2926 32.5723 34.7734 32.5723C43.5948 32.5723 50.8622 39.2261 51.8303 47.7888L50.915 48.8348ZM23.3269 57.1697C21.936 55.0316 21.1278 52.4794 21.1278 49.7386C21.1278 42.2026 27.237 36.0935 34.773 36.0935C42.3089 36.0935 48.4181 42.2026 48.4181 49.7386C48.4181 50.4669 48.361 51.1818 48.2511 51.8792L46.8581 53.4712C47.2221 52.2914 47.4181 51.0379 47.4181 49.7386C47.4181 42.7549 41.7567 37.0935 34.773 37.0935C27.7893 37.0935 22.1278 42.7549 22.1278 49.7386C22.1278 52.5667 23.0563 55.1779 24.6249 57.2842L23.3269 57.1697Z"
      fill="#69D7BC"
    />
  </svg>
);

const Factor = () => (
  <svg
    className="role-icon"
    width="60"
    height="60"
    viewBox="0 0 60 60"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <circle
      cx="29.827"
      cy="29.794"
      r="28.491"
      className="role-icon__circle"
      stroke="#69D7BC"
      strokeWidth="2"
    />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M29.6417 57.1646C44.8605 57.1646 57.1978 44.8273 57.1978 29.6085C57.1978 14.3896 44.8605 2.05233 29.6417 2.05233C14.4228 2.05233 2.08553 14.3896 2.08553 29.6085C2.08553 44.8273 14.4228 57.1646 29.6417 57.1646ZM29.6417 58.9142C45.8268 58.9142 58.9474 45.7936 58.9474 29.6085C58.9474 13.4234 45.8268 0.302734 29.6417 0.302734C13.4566 0.302734 0.335938 13.4234 0.335938 29.6085C0.335938 45.7936 13.4566 58.9142 29.6417 58.9142Z"
      fill="#69D7BC"
    />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M50.4985 28.7337L29.2042 8.50763L7.90995 28.7337L50.4985 28.7337ZM29.8067 7.87335C29.4691 7.55266 28.9394 7.55266 28.6018 7.87335L7.30749 28.0994C6.73451 28.6436 7.11969 29.6085 7.90995 29.6085H50.4985C51.2887 29.6085 51.6739 28.6436 51.1009 28.0994L29.8067 7.87335Z"
      fill="#69D7BC"
    />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M9.52131 30.4833H15.6449V47.1044H9.52131V30.4833ZM10.3961 31.3581V46.2296H14.7701V31.3581H10.3961Z"
      fill="#69D7BC"
    />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M7.33432 47.9792H51.949V48.854H7.33432V47.9792Z"
      fill="#69D7BC"
    />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M11.7083 51.4784H47.575V52.3532H11.7083V51.4784Z"
      fill="#69D7BC"
    />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M20.8937 30.4833H27.0173V47.1044H20.8937V30.4833ZM21.7685 31.3581V46.2296H26.1425V31.3581H21.7685Z"
      fill="#69D7BC"
    />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M31.3913 30.4833H37.5148V47.1044H31.3913V30.4833ZM32.2661 31.3581V46.2296H36.64V31.3581H32.2661Z"
      fill="#69D7BC"
    />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M42.7636 30.4833H48.8872V47.1044H42.7636V30.4833ZM43.6384 31.3581V46.2296H48.0124V31.3581H43.6384Z"
      fill="#69D7BC"
    />
    <path
      d="M28.5499 24.972V24.0377C27.5422 23.9818 26.7409 23.6143 26.146 22.9355L26.6604 22.2741C27.1713 22.848 27.8011 23.1769 28.5499 23.2609V20.6995C28.284 20.6295 28.067 20.5665 27.8991 20.5106C27.7381 20.4546 27.5492 20.3741 27.3322 20.2691C27.1153 20.1571 26.9438 20.0382 26.8178 19.9122C26.6919 19.7862 26.5834 19.6253 26.4924 19.4293C26.4084 19.2334 26.3664 19.0094 26.3664 18.7575C26.3664 18.2186 26.5694 17.7707 26.9753 17.4138C27.3812 17.0569 27.9061 16.8609 28.5499 16.8259V15.8601H29.1903V16.8364C30.0371 16.9204 30.7264 17.2388 31.2583 17.7917L30.7334 18.432C30.3205 17.9911 29.8061 17.7252 29.1903 17.6342V19.9122C29.5192 20.0032 29.7921 20.0942 30.0091 20.1851C30.226 20.2691 30.4535 20.3916 30.6914 20.5525C30.9364 20.7065 31.1183 20.906 31.2373 21.1509C31.3563 21.3889 31.4158 21.6688 31.4158 21.9907C31.4158 22.5226 31.2338 22.9845 30.8699 23.3764C30.506 23.7613 29.9461 23.9818 29.1903 24.0377V24.972H28.5499ZM30.513 22.0642C30.513 21.7493 30.3975 21.5043 30.1666 21.3294C29.9426 21.1544 29.6172 21.0039 29.1903 20.878V23.2609C29.6452 23.2119 29.9776 23.072 30.1876 22.841C30.4045 22.6101 30.513 22.3511 30.513 22.0642ZM27.2692 18.705C27.2692 18.9709 27.3777 19.1809 27.5947 19.3348C27.8116 19.4818 28.13 19.6183 28.5499 19.7442V17.6027C28.172 17.6307 27.8641 17.7462 27.6261 17.9492C27.3882 18.1451 27.2692 18.397 27.2692 18.705Z"
      fill="#69D7BC"
    />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M29.2043 26.5467C32.5862 26.5467 35.3278 23.805 35.3278 20.4231C35.3278 17.0411 32.5862 14.2995 29.2043 14.2995C25.8223 14.2995 23.0807 17.0411 23.0807 20.4231C23.0807 23.805 25.8223 26.5467 29.2043 26.5467ZM29.2043 27.4215C33.0694 27.4215 36.2026 24.2882 36.2026 20.4231C36.2026 16.558 33.0694 13.4247 29.2043 13.4247C25.3392 13.4247 22.2059 16.558 22.2059 20.4231C22.2059 24.2882 25.3392 27.4215 29.2043 27.4215Z"
      fill="#69D7BC"
    />
  </svg>
);

Icon.propTypes = {
  name: PropTypes.string.isRequired
};

export default Icon;
